<template>
    <div>
        <el-steps :active="active" finish-status="success" align-center>
            <el-step title="填写赎回信息"></el-step>
            <el-step title="确认验证"></el-step>
            <el-step title="完成"></el-step>
        </el-steps>
        <el-form
            ref="form"
            :model="form"
            label-width="100px"
            style="width:50%; margin:50px auto auto;display:flex;justify-content:center;"
        >
            <div v-if="active == 0">
                <el-form-item label="客户姓名" prop="consumerId">
                    <el-select
                        v-model="form.consumerId"
                        placeholder="请选择客户姓名"
                        @change="consumerChange"
                    >
                        <el-option
                            v-for="item in allConsumer"
                            :key="item.consumerId"
                            :label="item.consumerName"
                            :value="item.consumerId"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="基金名称" prop="fundId">
                    <el-select v-model="form.fundId" placeholder="请选择基金编号">
                        <el-option
                            v-for="item in allFund"
                            :key="item.fundId"
                            :label="item.fundName"
                            :value="item.fundId"
                        ></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="赎回方式">
                    <el-select v-model="form.paymentMethod" placeholder="请选择赎回方式">
                        <el-option label="余额" :value="0"></el-option>
                        <el-option label="银行卡" :value="1"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item v-if="form.paymentMethod == 1" label="选择银行卡">
                    <el-select v-model="form.cardName" placeholder="请选择银行卡">
                        <el-option
                            v-for="item in allCard"
                            :key="item.cardId"
                            :label="`${item.bankName}(尾号${item.cardNumber%10000})`"
                            :value="`${item.bankName}(尾号${item.cardNumber%10000})`"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item
                    label="赎回份额"
                    prop="orderCount"
                    :rules="[
                { required: true, message: '份额不能为空'},
                { type: 'number', message: '份额必须为数字值'}
                ]"
                >
                    <el-input size="small" v-model.number="form.orderCount" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="checkForm()">下一步</el-button>
                </el-form-item>
            </div>
            <div v-if="active == 1" style="width:80%">
                <el-descriptions :column="1" border style="margin-top:50px;">
                    <el-descriptions-item label="客户">{{form.consumerName}}</el-descriptions-item>
                    <el-descriptions-item label="基金">{{form.fundName}}</el-descriptions-item>
                    <el-descriptions-item label="赎回方式">{{form.paymentMethod?form.cardName:"账户余额"}}</el-descriptions-item>
                    <el-descriptions-item label="赎回份额">{{form.orderCount}}</el-descriptions-item>
                </el-descriptions>

                <div style="margin-top:50px;">
                    <el-input v-model="input" placeholder="请输入验证码"></el-input>
                </div>
                <div style="margin-top:50px;">
                    <el-button type="primary" @click="pops">生成验证码</el-button>
                </div>

                <el-form-item style="margin-top:50px;">
                    <el-button @click="active = 0">上一步</el-button>
                    <el-button type="primary" @click="active = 2">下一步</el-button>
                </el-form-item>
            </div>
            <div v-if="active == 2" class="step-success">
                <i class="el-icon-success" style="color:#52c41a;font-size:100px;"></i>
                <span style="font-size:30px;font-weight:700;">提交成功</span>
                <el-button type="primary" @click="goBack" style="width:100px;">返回</el-button>
            </div>
        </el-form>
    </div>
</template>


<script>
import { getConsumerInfo } from '@/api/bank'
import { getAllConsumer } from '@/api/consumer'
import { fundsell } from '@/api/order'
import { getAllFundInfo } from '@/api/fund'

export default {
    name: 'fundsell',
    data() {
        return {
            active: 0,
            allConsumer: [],
            allFund: [],
            allCard: [],
            input:'',
            form: {
                paymentMethod: '',
                cardName: '',
                cardId: '',
                consumerId: '',
                fundId: '',
                orderAmount: '',
            },
        }
    },
    created() {
        //先查询所有客户姓名和id并且放入数组
        getAllConsumer().then((res) => {
            this.allConsumer = res.data.data
        }),
            (err) => {
                console.log(err)
            },
            getAllFundInfo().then((res) => {
                this.allFund = res.data.data
            }),
            (err) => {
                console.log(err)
            }
    },
    methods: {
        pops(){
            //   console.log(this.form.credentialNumber);
            this.$message({
            message: '验证码为1425',
            type: ''
            })
        },
        onSubmit() {
            console.log(this.form)
            //   再拿对应id去查银行卡号
            getConsumerInfo(123).then((res) => {
                console.log(res)
            }),
                (err) => {
                    console.log(err)
                }
            //   再下订单
            fundsell(this.form).then((res) => {
                console.log(res)
                this.active = 2
            }),
                (err) => {
                    console.log(err)
                    this.active = 2
                }
            this.active = 2
        },
        checkForm() {
            console.log(this.form)
            this.$refs['form'].validate((valid) => {
                if (valid) {
                    this.form.fundName = this.allFund.find(
                        (item) => item.fundId === this.form.fundId
                    ).fundName
                    this.form.consumerName = this.allConsumer.find(
                        (item) => item.consumerId === this.form.consumerId
                    ).consumerName
                    this.active = 1
                } else {
                    console.log('请检查表单填写')
                    return false
                }
            })
        },
        goBack() {
            this.form = {
                cardId: '',
                consumerId: '',
                fundId: '',
                orderAmount: '',
            }
            this.active = 0
        },
        async consumerChange(consumerId) {
            let res = await getConsumerInfo(consumerId)
            this.allCard = res.data.data
        },
    },
}
</script>
<style scoped>
.step-success {
    display: flex;
    flex-direction: column;
    align-items: center;
}
</style>